<template>
	<view>
		<u-sticky>
			<u-tabs :active-color="color" :list="list" bar-width="80" fontSize="40" :is-scroll="false"
				:current="current" @change="change">
			</u-tabs>
		</u-sticky>
		<view class="item" v-for="(item, index) in studentAttendanceQueryDO.pageBean.data" :key="item.id">
			<view class="top">
				<view class="name">
					<view>课程名称:</view>
					<view class="courseName">{{item.signCourse}}</view>
				</view>
				<view class="my1" v-if="item.signState == '2'">
					<u-tag @click="showReason(item.attendanceConfigId)" v-if="item.lateReason == ''" type="warning"
						text="填写迟到原因" mode="dark" />
				</view>
				<view class="my1" v-if="item.signState == '0'">
					<u-tag type="primary" @click="sign(item)" text="签到" mode="dark" />
				</view>
			</view>
			<view class="phone" v-if="item.lateReason != ''">
				迟到原因：{{item.lateReason}}
			</view>
			<view class="bottom">
				签到开始时间：{{item.attendanceStartTime}}
			</view>
			<view class="bottom" v-if="item.signState == '0'">
				签到倒计时：<u-count-down @end="timeout" ref="uCountDown"
					:timestamp="timestamp(item.signIndate,item.attendanceStartTime)">
				</u-count-down>
			</view>
			<view class="bottom" v-if="item.signState == '1'">
				签到时间：{{item.signTime}}
			</view>
			<view class="bottom" v-if="item.signState == '2'">
				签到时间：{{item.signTime}} 未签到，自动签到
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-popup v-model="show" mode="top">
			<view class="reason">
				<view class="my2">
					迟到原因：
				</view>
				<u-input maxlength="100" placeholder="最多100个字符" v-model="studentAttendanceDO.lateReason" type="textarea"
					:border="true" :auto-height="true" />
				<view class="my2">
				</view>
				<view class="my2">
				</view>
				<u-button type="primary" @click="submitReason">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
					name: '等待签到'
				}, {
					name: '已签到'
				}, {
					name: '未签到',
				}],
				color: "",
				colors: [
					"#ffaa00",
					"#00aa7f",
					"#ff007f",

				],
				current: 0,
				studentAttendanceQueryDO: {
					studentId: "6",
					attendaceConfigId: "",
					signCourse: "",
					signState: "0",
					pageBean: {
						currPage: "1",
						pageSize: "10",
						totalPages: "",
						totalNum: "",
						data: [],
					},
				},
				studentAttendanceDO: {
					attendanceConfigId: "",
					lateReason: "",
					studentId: "6",
				},
				attendanceInfoDO: {
					studentAttendanceId: "",
					studentId: "6",
					studentNumber: "",
					lng: "0",
					lat: "0",
					redisKey: "",
					signArea: "",
					attendanceConfigId: ""
				},
			}
		},
		created() {
			this.color = this.colors[0];
			this.getList();
			this.getLocation();
		},
		methods: {
			showReason(attendanceConfigId) {
				this.studentAttendanceDO.attendanceConfigId = attendanceConfigId;
				this.show = true;
			},
			submitReason() {
				this.$axios
					.post("/api/attendance/addReason", this.studentAttendanceDO)
					.then((r) => {
						if (r.data.code == 200) {
							this.$refs.uToast.show({
								title: '填写成功',
								type: 'success'
							})
							this.getList();
							this.show = false;
							this.studentAttendanceDO.lateReason = "";
						}
					});
			},
			timeout() {
				this.getList();
			},
			timestamp(signIndate, attendanceStartTime) {
				let startTime = new Date(attendanceStartTime).getTime();
				let now = new Date().getTime();
				let time = Math.trunc((startTime + signIndate * 60 * 1000 - now) / 1000);
				return time;
			},
			change(index) {
				this.current = index;
				this.color = this.colors[index];
				this.studentAttendanceQueryDO.signState = index;
				this.getList();
			},
			getList() {
				this.$axios
					.post("/api/attendance/listAttendance", this.studentAttendanceQueryDO)
					.then((r) => {
						this.studentAttendanceQueryDO.pageBean = r.data.data;
					});
			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.attendanceInfoDO.lng = res.longitude;
						this.attendanceInfoDO.lat = res.latitude;
					}
				});
			},
			sign(item) {
				this.attendanceInfoDO.studentAttendanceId = item.id;
				this.attendanceInfoDO.redisKey = item.redisKey;
				this.attendanceInfoDO.signArea = item.signArea;
				this.attendanceInfoDO.attendanceConfigId = item.attendanceConfigId;
				this.$axios
					.post("/api/attendance/studentAttendance", this.attendanceInfoDO)
					.then(r => {
						console.log(r.data);
						if (r.data.code == 200 && r.data.data == null) {
							this.$refs.uToast.show({
								title: '签到成功',
								type: 'success'
							})
							this.getList();
						} else {
							this.$refs.uToast.show({
								title: '签到失败  ' + r.data.data,
								type: 'danger'
							})
						}
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reason {
		height: 500rpx;
		padding: 50rpx;
	}

	.courseName {
		font-size: 34rpx;
		font-weight: bold;
	}

	.name {
		width: 180px;
	}

	.my2 {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 50rpx;
	}

	.my1 {
		margin-left: 80px;
		margin-top: 10px;
		width: 100px;
	}

	.item {
		padding: 40rpx 20rpx;

		.top {
			display: flex;
			width: 100%;
			font-weight: bold;
			font-size: 28rpx;
		}

		.bottom {
			//display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>
